<template>
  <div id="postDetailView" ref="background">
    <div style="width: 80%; margin: 0 auto; margin-top: 5vh">
      <a-card
        v-if="post"
        aria-readonly="true"
        :title="post.title"
        class="post_card"
        style="width: 100%"
        hoverable
      >
        <template #extra>
          <a-space>
            <a-tag
              v-for="tag of post.tagList"
              :key="tag"
              :color="colors[tag] ?? '#0fc6c2'"
              >{{ tag }}</a-tag
            >
          </a-space>
        </template>
        <a-space>
          <a-descriptions
            title="題解類型"
            :column="{ xs: 1, md: 2, lg: 2 }"
            size="large"
          >
            <a-descriptions-item label="題目id">
              {{ post.questionId }}
            </a-descriptions-item>
            <a-descriptions-item label="題目标题">
              {{ post.questionTitle }}
            </a-descriptions-item>
          </a-descriptions>
        </a-space>
        <MdView :value="post.content as string" />
      </a-card>
    </div>
    <div style="width: 80%; margin: 0 auto; margin-top: 3vh">
      <a-card hoverable>
        <a-space :direction="'horizontal'" fill>
          <div style="width: 50%; margin-left: 30vw" @click="clickFavour">
            <span class="icon" v-if="post?.hasFavour === true"
              ><a-tooltip content="取消收藏"><icon-heart-fill /></a-tooltip
            ></span>
            <span class="icon" v-else
              ><a-tooltip content="收藏"><icon-heart /></a-tooltip
            ></span>
          </div>
          <div style="margin-left: 10vw" @click="clickThumb">
            <span class="icon" v-if="post?.hasThumb === true"
              ><a-tooltip content="取消点赞"><icon-star-fill /></a-tooltip
            ></span>
            <span class="icon" v-else
              ><a-tooltip content="点赞"><icon-star /></a-tooltip
            ></span>
          </div>
        </a-space>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  PostControllerService,
  PostFavourControllerService,
  PostThumbControllerService,
  PostVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRoute, useRouter } from "vue-router";
import CodeEdit from "@/components/CodeEdit.vue";
import MdView from "@/components/MdView.vue";
import { colors } from "@/access/GlobalColorEnum";

// 参数
const post = ref<PostVO>({
  content: "",
  createTime: "",
  favourNum: 0,
  id: 0,
  imgUrl: "",
  questionId: "",
  questionTitle: "",
  tagList: undefined,
  thumbNum: 0,
  title: "",
  updateTime: "",
  user: undefined,
  userId: 0,
  hasFavour: false,
  hasThumb: false,
});
const route = useRoute();
const router = useRouter();
const background = ref();
const postId = route.params.id as unknown as number;

// 函数
const loads = async () => {
  console.log(postId);
  if (!postId) {
    return;
  }
  const res = await PostControllerService.getPostVoByIdUsingGet(postId);
  if (res.code === 0) {
    post.value = res.data as PostVO;
    background.value.style = `background-image: url(${res.data?.imgUrl})`;
  } else {
    message.error("数据加载失败" + res.message);
  }
};
onMounted(loads);
const clickFavour = async () => {
  const res = await PostFavourControllerService.doPostFavourUsingPost({
    postId: post.value?.id as number,
  });
  if (res.code === 0) {
    post.value.hasFavour = post.value?.hasFavour ? false : true;
    message.success("操作成功");
  } else {
    message.error("操作失败" + res.message);
  }
};

const clickThumb = async () => {
  const res = await PostThumbControllerService.doThumbUsingPost({
    postId: post.value?.id as number,
  });
  if (res.code === 0) {
    post.value.hasThumb = post.value?.hasThumb ? false : true;
    message.success("操作成功");
  } else {
    message.error("操作失败" + res.message);
  }
};
</script>

<style scoped>
#postDetailView {
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  padding: 1px;
}
.post_card {
  margin-top: 2px;
  margin-left: 5px;
}
.icon {
  margin: 0 auto;
  font-size: 28px;
}
</style>
